<template>
  <div class="p-1.25rem box-border h-100% bg-[url('@/assets/images/home-bg.jpg')] object-center">
    <a-list
      :grid-props="{ gutter: [20, 20], sm: 24, md: 12, lg: 8, xl: 6 }"
      :data="postList"
      :bordered="false"
      @page-change="pageChange"
      :pagination-props="paginationProps"
    >
      <template #item="{ item }">
        <a-list :data="item.data">
          <a-card hoverable class="cursor-pointer" @click="toDetail(item.id)">
            <template #cover>
              <div
                :style="{
                  height: '204px',
                  overflow: 'hidden',
                }"
              >
                <img
                  :style="{ width: '100%', transform: 'translateY(-20px)' }"
                  alt="dessert"
                  :src="item.image"
                />
              </div>
            </template>
            <a-card-meta :title="item.title"> </a-card-meta>
          </a-card>
        </a-list>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import { PostControllerService, type PostQueryRequest, type PostVO } from '@/servers'
//@ts-ignore
import { ResponseCode } from '@/servers/core/request'
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
const postList = ref<PostVO[]>([])
const router = useRouter()
const paginationProps = reactive({
  defaultPageSize: 12,
  total: 0,
  current: 1,
})
const searchParams: PostQueryRequest = reactive({
  current: 1,
  pageSize: 12,
  category: 1,
})
const toDetail = (id: any) => {
  router.push({
    name: 'detail',
    params: { id },
  })
}
const pageChange = (page: number) => {
  searchParams.current = page
  paginationProps.current = page
}
const loadData = async () => {
  const res = await PostControllerService.listPostVoByPageUsingPost(searchParams)
  if (res.code == ResponseCode.SUCCESS) {
    postList.value = res.data.records
    paginationProps.total = res.data.total
  }
}
watch(() => searchParams.current, loadData)
onMounted(async () => {
  await loadData()
})
</script>
